<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Combogrid</title>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:20px 0">
    <input type="checkbox" checked onchange="$('#cc').combogrid({selectOnNavigation:$(this).is(':checked')})">
    <span>SelectOnNavigation</span>
</div>

<div style="margin:20px 0">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
</div>



<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
    <table id="userreg_middle_zcrj_tb"></table>
<input id="cc" name="dept"  class="easyui-combogrid" style="width: 80%" value="01">
<script type="text/javascript">
//    $("#userreg_middle_zcrj_tb").datagrid({
//        width: 450,
//        height: 250,
//        rownumbers: true,
//        columns: [[
//            { field: 'code', title: 'code', width: 100, editor: { type: 'combobox'} },
//            { field: 'name', title: 'name', width: 100, editor: { type: 'combobox'} },
//            { field: 'addr', title: 'addr', width: 100, editor: { type: 'text'} },
//            { field: 'col4', title: '', width: 50
//            }
//        ]]
//    });

    $('#cc').combogrid({
        panelWidth: 450,
        value: 'name',
        idField: 'code',
        textField: 'name',
        columns: [[{ field: 'code', title: 'Code', width: 60 },
            { field: 'name', title: 'Name', width: 100 },
            { field: 'addr', title: 'Address', width: 120 },
            { field: 'col4', title: 'Col41', width: 100}]],
        fitColumns: true,
        label: 'Select Items:',
        labelPosition: 'top',
        multiple: true,
    });
    var a = [{ code: 1, name: 'aaa', addr: 'aasdf', col4: 'asdfasdfasdf' },
        { code: 2, name: 'bbb', addr: 'aasdf', col4: 'asdfasdfasdf' },
        { code: 3, name: 'ccc', addr: '新疆', col4: 'asdfasdfasdf'}];
//    $("#userreg_middle_zcrj_tb").datagrid("loadData", a);
    $("#cc").combogrid("grid").datagrid("loadData", a);



function getValue(){
    var val = $('#cc').combogrid('getValue');
//    获取的是id值
    alert(val);
}
function setValue(){
    $('#cc').combogrid('setValue', 'EST-13');
}
function disable(){
    $('#cc').combogrid('disable');
}
function enable(){
    $('#cc').combogrid('enable');
}

</script>
</div>
</body>
</html>